<template>
	<view class="index">
		<view class="nav">
			<text class="t2" :class="{ t1: map.status == 'all' }" @tap="setMap('status', 'all')">全部</text>
			<text class="t2" :class="{ t1: map.status == 2 }" @tap="setMap('status', 2)">进行中</text>
			<text class="t2" :class="{ t1: map.status == 3 }" @tap="setMap('status', 3)">待支付</text>
			<text class="t2" :class="{ t1: map.status == 99 }" @tap="setMap('status', 99)">已完成</text>
		</view>
		<view class="center">
			<view class="orders" v-if="order.total > 0" v-for="(v, i) in orderList" :key="i" @tap="navigateTo('/pages/myDriving/drivingDetails?order_id=' + v.id)">
				<view class="top">
					<view class="input">
						<text class="icon gray">&#xe77c;</text>
						<text class="time">{{ v.createtime | date }}</text>
					</view>
					<text class="more icon gray">{{ v.status_text }}&#xe60f;</text>
				</view>
				<view class="left">
					<view class="input">
						<text class="icon green">&#xe608;</text>
						<text class="address">{{ v.start_address }}</text>
					</view>
					<view class="input">
						<text class="icon orange">&#xe608;</text>
						<text class="address">{{ v.end_address }}</text>
					</view>
				</view>
				<view class="right">
					￥{{ v.price }}元
					<view class="" v-if="v.status == 99" style="margin-top: 5rpx;margin-left: -15rpx;white-space: nowrap;">平台佣金：{{ v.plat_fee }}元</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="item" @tap="navigateTo('/pages/myDriving/myDriving')">
				<text class="icon">&#xe606;</text>
				首页
			</view>
			<view class="item active" @tap="navigateTo('/pages/myDriving/order')">
				<text class="icon">&#xe616;</text>
				订单
			</view>
			<view class="item " @tap="navigateTo('/pages/mine/mine')">
				<image src="@/static/wd.png" style="width: 48rpx;height: 48rpx;margin-bottom: 10rpx;" mode=""></image>
				我的
			</view>
		</view>
	</view>
</template>

<script>
import helper from '../../common/helper.js';
import api from '../../common/api.js';
export default {
	data() {
		return {
			map: {
				status: 'all',
				page: 1,
				type: 'driver'
			},
			order: {},
			orderList: []
		};
	},
	filters: {
		date: value => {
			let date = new Date(value * 1000);
			let h = date.getHours();
			let m = date.getMinutes();
			return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m);
		}
	},
	onShow() {
		this.orderList = [];
		this.map.page = 1;
		this.getList();
	},
	methods: {
		async getList() {
			let res = await api.getOrderList(this.map);
			this.order = res.data;
			this.orderList = this.orderList.concat(res.data.data);
			uni.stopPullDownRefresh();
		},
		onPullDownRefresh() {
			this.map.page = 1;
			this.orderList = [];
			this.getList();
		},
		onReachBottom() {
			if (this.order.last_page > this.order.current_page) {
				this.map.page++;
				this.getList();
			}
		},
		navigateTo(url) {
			if (url.indexOf('mine/mine') > 0) {
				uni.switchTab({
					url: url
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		setMap(key, value) {
			this.map[key] = value;
			this.list = [];
			this.map.page = 1;
			this.getList();
		}
	}
};
</script>

<style lang="scss" scoped>
page,
.index {
	height: 100%;
	background-color: #fbfbfb;
}
.center {
	padding: 30upx 30rpx 150rpx;
}
.center1 {
	padding: 30upx;
}
.nav {
	display: flex;
	padding: 20upx;
	font-size: 28upx;
	background-color: #ffffff;
	.t1 {
		width: 48%;
		text-align: center;
		color: #32c45e;
	}
	.t2 {
		width: 48%;
		text-align: center;
	}
	.icon {
		font-size: 30upx;
	}
}
.orders {
	margin-bottom: 30upx;
	display: flex;
	padding: 20upx 20upx;
	border-radius: 10upx;
	box-shadow: 1px 1px 1px 1px #eaeaea;
	align-items: center;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	.icon {
		font-size: 48upx;
	}
	.top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
		.input {
			display: flex;
			align-items: center;
			color: #999999;
		}
		.more {
			font-size: 28upx;
		}
	}
	.left {
		width: 65%;
		.input {
			width: 100%;
			padding: 6upx 0;
			display: flex;
			align-items: center;
			.time {
				width: 70%;
				font-size: 25upx;
				color: #979797;
			}
			.address {
				width: 70%;
				font-size: 26upx;
			}
		}
	}
	.right {
		width: 30%;
		font-size: 26upx;
		color: #e51c23;
		button {
			width: 60%;
			background-color: #32c45e;
			margin-top: 20upx;
			border-radius: 50upx;
			padding: 0 10upx;
			font-size: 22upx;
		}
	}
}

.bottom {
	background-color: #ffffff;
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 120upx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.item {
		display: flex;
		flex-direction: column;
		width: 33.33%;
		align-items: center;
		font-size: 24upx;
		.icon {
			font-size: 56upx;
			color: #999999;
		}
	}
}
.active {
	color: #32c45e !important;
	.icon {
		color: #32c45e !important;
	}
}
</style>
